---
type: tutorial
title: Aggiungi contenuti dinamici su di te
description: |-
  Tutorial: Crea il tuo primo blog Astro —
  Usa variabili e rendering condizionale sulle tue pagine Astro
i18nReady: true
---
import Checklist from '~/components/Checklist.astro';
import Spoiler from '~/components/Spoiler.astro';
import Blanks from '~/components/tutorial/Blanks.astro';
import Box from '~/components/tutorial/Box.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Ora che hai un sito web multi-pagina con contenuto HTML, è il momento di aggiungere un po' di HTML dinamico!

<PreCheck>
  - Definisci il titolo della tua pagina nel frontmatter e usalo nel tuo HTML
  - Visualizza condizionatamente elementi HTML
  - Aggiungi un po' di contenuto su di te
</PreCheck>

Qualsiasi file HTML è un linguaggio Astro valido. Ma, puoi fare di più con Astro del semplice HTML normale!

## Definisci e usa una variabile

Apri `about.astro`, che dovrebbe apparire così:

```astro title="src/pages/about.astro"
---
---
<html lang="it">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Astro</title>
  </head>
  <body>
    <a href="/">Home</a>
    <a href="/about/">Su di me</a>
    <a href="/blog/">Blog</a>
    <h1>Su di me</h1>
    <h2>... e il mio nuovo sito Astro!</h2>

    <p>Sto seguendo il tutorial introduttivo di Astro. Questa è la seconda pagina sul mio sito web, ed è la prima che ho costruito da solo!</p>

    <p>Questo sito si aggiornerà man mano che completerò altre parti del tutorial, quindi continua a controllare e vedi come sta andando il mio percorso!</p>
  </body>
</html>
```

<Steps>
1. Aggiungi la seguente riga di JavaScript nello script frontmatter, tra i **recinti di codice**:

    ```astro title="src/pages/about.astro" ins={2}
    ---
    const pageTitle = "Su di me";
    ---
    ```

2. Sostituisci sia il titolo statico "Astro" che l'intestazione "Su di me" nel tuo HTML con la variabile dinamica `{pageTitle}`.

    ```astro title="src/pages/about.astro" del={5,12} ins={6,13}
    <html lang="it">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>Astro</title>
        <title>{pageTitle}</title>
      </head>
      <body>
        <a href="/">Home</a>
        <a href="/about/">Su di me</a>
        <a href="/blog/">Blog</a>
        <h1>Su di me</h1>
        <h1>{pageTitle}</h1>
        <h2>... e il mio nuovo sito Astro!</h2>

        <p>Sto seguendo il tutorial introduttivo di Astro. Questa è la seconda pagina sul mio sito web, ed è la prima che ho costruito da solo!</p>

        <p>Questo sito si aggiornerà man mano che completerò altre parti del tutorial, quindi continua a controllare e vedi come sta andando il mio percorso!</p>
      </body>
    </html>
    ```

3. Aggiorna l'anteprima live della tua pagina `/about`.

    Il testo della tua pagina dovrebbe apparire uguale e il titolo della pagina visualizzato nella scheda del tuo browser dovrebbe ora essere "Su di me" invece di "Astro".

    Invece di digitare testo direttamente nei tag HTML, hai appena **definito e poi usato una variabile** nelle due sezioni del tuo file `.astro`, rispettivamente.

4. Usa lo stesso schema per creare un valore `pageTitle` da utilizzare in `index.astro` ("Pagina iniziale") e `blog.astro` ("Il mio Blog di apprendimento di Astro"). Aggiorna l'HTML di queste pagine in entrambi i punti in modo che il titolo della tua pagina corrisponda all'intestazione visualizzata su ciascuna pagina.
</Steps>

:::note[Punti chiave]
1. **Definisci** variabili nel tuo script Astro usando espressioni JavaScript o TypeScript.
2. **Usa** queste variabili nel tuo template Astro all'interno di parentesi graffe `{ }` per dire ad Astro che stai usando un po' di JavaScript.
:::

## Scrivi espressioni JavaScript in Astro

<Steps>
1. Aggiungi il seguente JavaScript al tuo frontmatter, tra i **recinti di codice**:

      (Puoi personalizzare il codice per te stesso, ma questo tutorial userà il seguente esempio.)

    ```astro title="src/pages/about.astro" ins={4-9, 11}
    ---
    const pageTitle = "Su di me";

    const identity = {
      firstName: "Sarah",
      country: "Canada",
      occupation: "Scrittrice tecnica",
      hobbies: ["fotografia", "birdwatching", "baseball"],
    };

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Scrivere Documentazione"];
    ---
    ```

2. Poi, aggiungi il seguente codice al tuo template HTML, sotto il tuo contenuto esistente:

    ```astro title="src/pages/about.astro"
    <p>Ecco alcuni fatti su di me:</p>
    <ul>
      <li>Il mio nome è {identity.firstName}.</li>
      <li>Vivo in {identity.country} e lavoro come {identity.occupation}.</li>
      {identity.hobbies.length >= 2 &&
        <li>Due dei miei hobby sono: {identity.hobbies[0]} e {identity.hobbies[1]}</li>
      }
    </ul>
    <p>Le mie competenze sono:</p>
    <ul>
      {skills.map((skill) => <li>{skill}</li>)}
    </ul>
    ```
</Steps>

:::note[Punti chiave]
1. Scrivere un template Astro è molto simile a **scrivere HTML**, ma puoi includere espressioni JavaScript al suo interno.
2. Lo script frontmatter di Astro contiene solo JavaScript.
3. Puoi usare tutti i moderni **operatori logici**, **espressioni** e **funzioni** JavaScript in entrambe le sezioni del tuo file `.astro`. Ma, le parentesi graffe sono necessarie (solo) nel corpo del template HTML.
:::

<Box icon="question-mark">

### Metti alla prova le tue conoscenze

1. Il frontmatter di un file `.astro` è scritto in:

    <MultipleChoice>
        <Option>HTML</Option>
        <Option>YAML</Option>
        <Option isCorrect>JavaScript</Option>
    </MultipleChoice>

2. Oltre all'HTML, la sintassi di Astro ti permette di includere:

    <MultipleChoice>
        <Option isCorrect>Operatori logici, espressioni e funzioni JavaScript</Option>
        <Option>YAML</Option>
        <Option>Markdown</Option>
    </MultipleChoice>

3. Quando hai bisogno di scrivere il tuo JavaScript all'interno di parentesi graffe?
    <MultipleChoice>
        <Option>
          Quando non sei sicuro che sia corretto.
        </Option>
        <Option isCorrect>
          Quando all'interno della sezione del template HTML di un componente Astro.
          </Option>
        <Option>
          Tra i recinti di codice in un componente Astro.
        </Option>
    </MultipleChoice>
</Box>

## Renderizza condizionatamente elementi

Puoi anche usare le tue variabili di script per scegliere **se** renderizzare o meno singoli elementi del contenuto `<body>` del tuo HTML.

<Steps>
1. Aggiungi le seguenti righe al tuo script frontmatter per **definire variabili**:

    ```astro title="src/pages/about.astro" ins={13-15}
    ---
    const pageTitle = "Su di me";

    const identity = {
      firstName: "Sarah",
      country: "Canada",
      occupation: "Scrittrice tecnica",
      hobbies: ["fotografia", "birdwatching", "baseball"],
    };

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Scrivere Documenti"];

    const happy = true;
    const finished = false;
    const goal = 3;
    ---
    ```

2. Aggiungi le seguenti righe sotto i tuoi paragrafi esistenti.

    Poi, controlla l'anteprima live nella scheda del tuo browser per vedere cosa viene visualizzato sulla pagina:

    ```astro title="src/pages/about.astro" /:|&&/ "?"
    {happy && <p>Sono felice di imparare Astro!</p>}

    {finished && <p>Ho finito questo tutorial!</p>}

    {goal === 3 ? <p>Il mio obiettivo è finire in 3 giorni.</p> : <p>Il mio obiettivo non è 3 giorni.</p>}
    ```

3. Esegui il commit delle tue modifiche su GitHub prima di andare avanti. Fallo ogni volta che vuoi salvare il tuo lavoro e aggiornare il tuo sito web live.
</Steps>

:::tip
La sintassi di templating di Astro è simile alla sintassi JSX. Se ti stai chiedendo come usare il tuo script nel tuo HTML, allora cercare come viene fatto in JSX è probabilmente un buon punto di partenza!
:::



<Box icon="question-mark">

### Analizza lo Schema

Dato il seguente script `.astro`:

```astro title="src/pages/about.astro"
---
const operatingSystem = "Linux";
const quantity = 3;
const footwear = "boots";
const student = false;
---
```


Per ogni espressione del template Astro, puoi prevedere l'HTML (se presente!) che verrà inviato al browser? Clicca per rivelare se hai ragione!

1.  `<p>{operatingSystem}</p>`

    <p>
      <Spoiler>`<p>Linux</p>`</Spoiler>
    </p>

2.  `{student && <p>Sono ancora a scuola.</p>}`

    <p>
      <Spoiler>Nulla verrà visualizzato perché `student` restituisce false.</Spoiler>
    </p>

3.  `<p>Ho {quantity + 8} paia di {footwear}</p>`

    <p>
      <Spoiler>`<p>Ho 11 paia di boots</p>`</Spoiler>
    </p>

4.  `{operatingSystem === "MacOS" ? <p>Sto usando un Mac.</p> : <p>Non sto usando un Mac.</p>}`

    <p>
      <Spoiler>`<p>Non sto usando un Mac.</p>`</Spoiler>
    </p>
</Box>


<Box icon="check-list">
## Checklist

<Checklist>
- [ ] Posso definire valori in e usare valori nei file `.astro`.
- [ ] Posso renderizzare condizionatamente elementi HTML.
</Checklist>
</Box>


### Risorse

- [Espressioni dinamiche in Astro](/it/reference/astro-syntax/#jsx-like-expressions)
